<template>
	<view class="box" v-if="is_loading>0">
		<div class="loader"></div>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {
			is_loading() {
				return this.$store.state.loading
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.05);
		font-size: 50rpx;
	}

	.loader:before,
	.loader:after,
	.loader {
		display: inline-block;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		color: $uni-primary;
		box-shadow: 0 0 4px #fff;
		vertical-align: middle;
		pointer-events: none;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation: loader 1.8s infinite ease-in-out;
		animation: loader 1.8s infinite ease-in-out;
	}

	.loader {
		position: relative;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
		top: -1em;
	}

	.loader:before {
		right: 85%;
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.loader:after {
		left: 85%;
	}

	.loader:before,
	.loader:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		width: inherit;
		height: inherit;
	}

	@-webkit-keyframes loader {

		0%,
		80%,
		100% {
			box-shadow: 0 1em 0 -1em;
		}

		40% {
			box-shadow: 0 1em 0 -.2em;
		}
	}

	@keyframes loader {

		0%,
		80%,
		100% {
			box-shadow: 0 1em 0 -1em;
		}

		40% {
			box-shadow: 0 1em 0 -.2em;
		}
	}
</style>